'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Button,Row, Col, Table, Popconfirm } from 'antd';
import { getRows,getRow,delRow,_setRow } from '../../../reducers/role/actions.js';
import { setDialog }   from '../../../reducers/common/actions.js';
import MainArea        from '../../../components/common/mainArea'
import EditDialog  from './EditDialog';
import PermissionDialog  from './PermissionDialog';

import '../style.less';
class RolesListView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys:[]
        };
        this.props.getRows({});
    }
    handleColumn(columns){
        let _columns = [];
        columns.forEach( column => {
            let render;
            if(column.title == '状态'){
                render = (text,record)=>{
                    return (
                        <div>{text?"激活":"禁用"}</div>
                    )
                }
            };
            if(column.title == '操作'){
                render = (text,record)=>{
                    return (
                        <div>
                            <a href="javascript:;" onClick={this.onChangeRow.bind(this,record.key)}>
                                修改
                            </a>
                            <span className="ant-divider" />
                            <a href="javascript:;" onClick={this.onChangePermission.bind(this,record.key)}>
                                权限
                            </a>
                            <span className="ant-divider" />
                            <Popconfirm placement="bottomRight" title="确定要删除吗？" onConfirm={this.onDeleteRow.bind(this,record.key)} onCancel={()=>{}}>
                                <a href="javascript:;">
                                    删除
                                </a>
                            </Popconfirm>

                        </div>
                    )
                }
            };
            _columns.push({
                title: column.title,
                dataIndex: column.dataIndex,
                key: column.key,
                render
            })
        });
        return _columns;
    }
    render() {
        let { dialogKey,dialogPermissionKey,rows } = this.props;
        if(!rows) return null;
        const dialogVisible = this.props.dialog[dialogKey];
        const dialogPermissionVisible = this.props.dialog[dialogPermissionKey];

        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            type:"radio",
            onChange: ((selectedRowKeys)=>{
                this.setState({ selectedRowKeys });
            })
        };

        let talbeProps = {
            loading:this.props.fetching.FETCHING_ROWS,
            pagination:rows.pagination,
            dataSource:rows.dataSource,
            columns:this.handleColumn(rows.columns),
            //rowSelection,
            onChange:(pagination, filters, sorter)=>{
                console.log({pagination, filters, sorter})
                this.props.getRows({pagination, filters, sorter});
            }
        };
        let editDialog = dialogVisible ? <EditDialog dialogKey={dialogKey} /> : null;
        let permissionDialog = dialogPermissionVisible ? <PermissionDialog dialogKey={dialogPermissionKey} /> : null;

        return (
            <MainArea title={this.props.title} left="0">
                { editDialog }
                { permissionDialog }
                <div style={{ marginTop:16,marginBottom: 16 }}>
                    <Button type="primary"
                            style={{ marginRight: 8 }}
                            onClick={this.onAddRow.bind(this)}>
                        新加
                    </Button>
                    <Button type="primary"
                            onClick={()=>{}}
                            disabled={!(selectedRowKeys.length > 0)} >删除
                    </Button>
                    <span style={{ marginLeft: 8 }}>{selectedRowKeys.length > 0 ? `选择了 ${selectedRowKeys.length} 条记录` : ''}</span>
                </div>
                <Table {...talbeProps } />
            </MainArea>
        )
    }
    onDeleteRow(id){
        this.props.delRow(id)
    }
    onChangePermission(id){
        this.props.getRow(id,()=>{
            this.props.setDialog(this.props.dialogPermissionKey,true)
        })
    }
    onChangeRow(id){
        this.props.getRow(id,()=>{
            this.props.setDialog(this.props.dialogKey,true)
        })
    }
    onAddRow(){
        this.props._setRow({});
        this.props.setDialog(this.props.dialogKey,true)
    }
}

RolesListView.propTypes = {
    dialogKey:PropTypes.string.isRequired,
    title:PropTypes.string.isRequired
}
RolesListView.defaultProps = {
    title:"角色管理",
    dialogKey:"ROLE_EDIT_DIALOG_VISIBLE",
    dialogPermissionKey:"ROLE_PERMISSION_DIALOG_VISIBLE"
};
export default connect(
    state =>{
        return {
            fetching:state.common.fetching,
            dialog: state.common.dialog,
            rows:state.role.rows,
        };
    },
    dispatch => {
        return {
            setDialog: (key,value)=>dispatch(setDialog(key,value)),
            getRows: (data)=>dispatch( getRows(data) ) ,
            getRow: (id,cb)=>dispatch(getRow(id,cb)),
            _setRow:(row)=>dispatch(_setRow(row)),
            delRow:(id)=>dispatch(delRow(id))
        }
    }
)(RolesListView);